<template>
    <div class="login-main">
        <div title="用户账号" class="input">
        <div style="width: 40px;height: 40px;padding-left: 3px;margin-top: 6px;"><img src="/imgs/loginUser.jpg" alt="" style="width: 28px;height: 28px;"></div>
            <input v-model="name" type="text" name="" id="" placeholder="请输入用户名称">
        </div>
        <div title="用户密码" class="input">
            <div style="width: 40px;height: 40px;padding-left: 3px;margin-top: 6px;"><img src="/imgs/loginPsw.jpg" alt="" style="width: 28px;height: 28px;"></div>
            <input v-model="password" type="password" name="" id="" placeholder="请输入用户密码">
        </div>
    </div>
    <!-- <div class="login-sider">
        <drag-verify ref="dragVerify" :width="360" :isPassing.sync="isPassing" text="请按住滑块拖动" successText="验证通过"
             :handlerIcon="icon1" :successIcon="icon1" @passcallback="passcallback" style="margin-left: 20px;">
        <i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i>   
      </drag-verify>
    </div> -->
    <button @click="handleLogin" style="width: 90%;height: 40px;background-color: orange;color: white;font-size: 18px;border: 0;">登录</button>
    <p style="font-size: 12px;margin-top: 10px;">其他登录方式</p>
    <div style="display: flex;margin: 0 auto;width: 90%;height: 45px;justify-content: center;align-items: center;">
      <div style="width: 40px;height: 40px;background-color: orange;border-radius: 50%;margin-right: 40px;"></div>
      <div style="width: 40px;height: 40px;background-color: orange;border-radius: 50%;"></div>
    </div>
</template>

<script setup>
import { ref} from "vue";

const name=ref("")
const password=ref("")

const handleLogin=()=>{
  console.log(name.value)
  console.log(password.value)
}
</script>

<style>
.login-main{
      width: 100%;
      height: 130px;
      text-align: center;
      
    }
    .login-main .input{
      display: flex;
      width: 90%;
      height: 44px;
      /* line-height: 40px; */
      padding: 0;
      margin: 0 auto;
      margin-bottom: 20px;
      border: 2px solid rgb(128, 128, 128);
    }
    .login-main .input input{
      width: 80%;
      height: 26px;
      outline: none;
      padding-left: 20px;
      border: 0;
      margin-top: 7px;
      margin-left: 8px;
      font-size: 16px;
      border-left: 2px solid rgb(128, 128, 128);
    }
    .login-sider{
      width: 100%;
      height: 60px;
      text-align: center;
      border: 1px solid red;
      user-select: none;
    }
</style>